<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入登录名"
        v-model="queryForm.name"
      >
      </el-input>
      <el-input
        style="width: 200px;"
        class="filter-item"
        placeholder="请输入手机号"
        v-model="queryForm.phone"
      >
      </el-input>
      <el-select
        clearable
        style="width: 150px"
        class="filter-item"
        v-model="queryForm.status"
        placeholder="请选择用户状态"
      >
        <el-option
          v-for="(val, key) in statusOptions"
          :key="key"
          :label="val"
          :value="key"
        >
        </el-option>
      </el-select>
      <el-button
        class="filter-item"
        @click="doQuery"
        type="primary"
        icon="el-icon-search"
        title="搜索"
        >搜索</el-button
      >
    </div>
    <el-table
      v-loading="loading"
      @sort-change="handleSortChange"
      :data="records"
      style="width: 100%"
    >
      <el-table-column prop="rowId" label="ID" align="center" width="100">
      </el-table-column>
      <el-table-column prop="name" align="center" label="登录名" width="150">
      </el-table-column>
      <el-table-column prop="realName" align="center" label="真名" width="150">
      </el-table-column>
      <el-table-column prop="phone" align="center" label="手机号" width="150">
        <template slot-scope="scope">
          <template v-if="scope.row.phone !== undefined">
            {{
              scope.row.phone.substr(0, 3) + '*****' + scope.row.phone.slice(8)
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="idcard" align="center" label="身份证" width="250">
        <template slot-scope="scope">
          <template
            v-if="
              scope.row.idcard !== undefined && scope.row.idcard.length == 15
            "
          >
            {{
              scope.row.idcard.substr(0, 4) +
                '******' +
                scope.row.idcard.slice(11)
            }}
          </template>
          <template
            v-if="
              scope.row.idcard !== undefined && scope.row.idcard.length == 18
            "
          >
            {{
              scope.row.idcard.substr(0, 4) +
                '******' +
                scope.row.idcard.slice(14)
            }}
          </template>
        </template>
      </el-table-column>
      <el-table-column
        prop="verifyFlag"
        align="center"
        label="实名状态"
        width="150"
      >
        <template slot-scope="scope">
          {{ Dicts.USER_VERIFY_FLAG[scope.row.verifyFlag] }}
        </template>
      </el-table-column>
      <el-table-column prop="sex" align="center" label="性别" width="100">
        <template slot-scope="scope">
          {{ Dicts.USER_SEX[scope.row.sex] }}
        </template>
      </el-table-column>
      <el-table-column prop="age" align="center" label="年龄" width="100">
      </el-table-column>
      <el-table-column prop="status" align="center" label="状态" width="150">
        <template slot-scope="scope">
          {{ Dicts.CONSUMER_STATUS[scope.row.status] }}
        </template>
      </el-table-column>
      <el-table-column
        prop="createTime"
        sortable="custom"
        sort-by="create_time"
        label="创建时间"
        align="center"
        width="250"
      >
      </el-table-column>
      <el-table-column
        width="450"
        align="center"
        label="操作"
        class-name="small-padding"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button
            v-permission="'appUser:edit'"
            @click="editDialog(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-edit"
            circle
            title="修改"
          ></el-button>
          <el-button
            v-permission="'appUser:roleDialog'"
            @click="roleDialog(scope.row)"
            type="warning"
            size="mini"
            icon="el-icon-setting"
            circle
            title="赋权"
          ></el-button>
          <template v-if="scope.row.status == 1">
            <el-button
              v-permission="'appUser:disabled'"
              size="mini"
              type="danger"
              @click="handleDelete(scope.row.rowId)"
              icon="el-icon-close"
              circle
              title="禁用"
            ></el-button>
          </template>
          <template v-else>
            <el-button
              v-permission="'appUser:active'"
              size="mini"
              type="success"
              @click="active(scope.row.rowId)"
              icon="el-icon-check"
              circle
              title="激活"
            ></el-button>
          </template>
          <el-button
            v-permission="'appUser:delete'"
            size="mini"
            type="danger"
            @click="deleteApp(scope.row)"
            icon="el-icon-delete"
            circle
            title="注销"
          ></el-button>
          <el-button
            v-permission="'appUser:companyDialog'"
            @click="companyDialog(scope.row.rowId)"
            type="info"
            size="mini"
            icon="el-icon-view"
            circle
            title="公司详情"
          ></el-button>
          <el-button
            v-permission="'appUser:bankDialog'"
            @click="bankDialog(scope.row.rowId)"
            type="info"
            size="mini"
            icon="el-icon-view"
            circle
            title="银行卡详情"
          ></el-button>
          <el-button
            v-permission="'appUser:addressDialog'"
            @click="addressDialog(scope.row.rowId)"
            type="info"
            size="mini"
            icon="el-icon-view"
            circle
            title="地址详情"
          ></el-button>
          <el-button
            v-permission="'appUser:restPassword'"
            @click="editExample(scope.row)"
            type="primary"
            size="mini"
            icon="el-icon-refresh"
            circle
            title="重置密码"
          ></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination-container">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryForm.current"
        :page-sizes="[10, 20, 30, 50]"
        :page-size="queryForm.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="queryForm.total"
      >
      </el-pagination>
    </div>
    <el-dialog
      :title="`重置密码`"
      :visible.sync="passwordFormVisible"
      width="40%"
    >
      <el-form
        :model="passwordForm"
        label-width="90px"
        :rules="passwordFormRules"
        ref="passwordForm"
      >
        <el-form-item label="新密码" prop="password">
          <el-input
            type="password"
            v-model="passwordForm.password"
            auto-complete="off"
            placeholder="请输入6-20位且包含大小写英文字母和数字的密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="passwordFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetPassword">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`修改`"
      :visible.sync="dialogEditFormVisible"
      width="25%"
    >
      <el-form
        :model="editForm"
        label-width="90px"
        :rules="editFormRules"
        ref="editForm"
      >
        <el-form-item label="真实姓名" prop="realName">
          <el-input v-model="editForm.realName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="editForm.phone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="idcard">
          <el-input v-model="editForm.idcard" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="邮箱"
          prop="mail"
          :rules="[
            {
              type: 'email',
              message: '请输入正确的邮箱',
              trigger: ['blur', 'change']
            }
          ]"
        >
          <el-input v-model="editForm.mail" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="editAppUser">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`赋权`"
      :visible.sync="dialogRoleFormVisible"
      width="25%"
    >
      <el-form
        :model="roleForm"
        label-width="90px"
        :rules="roleFormRules"
        ref="roleForm"
      >
        <!-- <el-form-item
          label="角色"
          prop="roleId"
        > -->
        <!-- <el-checkbox-group>
              <template v-for="item in roles">
                  <el-checkbox v-model="roleForm.roleId" :label=item.rowId>{{ item.name }}</el-checkbox>
                </br>
              </template>
           </el-checkbox-group> -->
        <el-checkbox-group
          v-model="checkedRoles"
          @change="handlecheckedRolesChange"
        >
          <el-form-item label="角色" prop="roleId">
            <el-checkbox
              v-for="item in roles"
              :label="item.rowId"
              :key="item.name"
              v-if="item.type == '1'"
              >{{ item.name }}</el-checkbox
            >
          </el-form-item>
          <!-- <br>
            <el-form-item
          label="外部角色"
          prop="roleId"
        >
             <el-checkbox
              v-for="item in roles"
              :label="item.rowId"
              :key="item.name"
              v-if="item.type=='2'"
            >{{ item.name }}</el-checkbox>
            </el-form-item> -->
        </el-checkbox-group>
        <!-- </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogRoleFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addRole">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`修改企业信息`"
      :visible.sync="dialogEditCompanyVisible"
      width="60%"
    >
      <el-form
        :model="companyForm"
        label-width="90px"
        :rules="editCompanyRules"
        ref="companyForm"
      >
        <el-form-item label="企业名称" prop="companyName">
          <el-input
            v-model="companyForm.companyName"
            auto-complete="off"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="信用代码" prop="companyCode">
          <el-input
            v-model="companyForm.companyCode"
            auto-complete="off"
            maxlength="16"
          ></el-input>
        </el-form-item>
        <el-form-item label="法人姓名" prop="corporateName">
          <el-input
            v-model="companyForm.corporateName"
            auto-complete="off"
            maxlength="5"
          ></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="linkTel">
          <el-input
            v-model="companyForm.linkTel"
            auto-complete="off"
            maxlength="20"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业地址" prop="companyAddr">
          <el-input
            v-model="companyForm.companyAddr"
            auto-complete="off"
            maxlength="25"
          ></el-input>
        </el-form-item>
        <!-- <el-form-item label="营业执照" prop="busiLicensePhoto">
          <el-input v-model="companyForm.busiLicensePhoto" auto-complete="off" ></el-input>
        </el-form-item> -->
        <el-row>
          <el-col :span="8">
            <el-form-item label="营业执照" prop="busiLicensePhoto">
              <el-upload
                class="avatar-uploader"
                action=""
                :http-request="upload"
                :data="{ dir: '/companys' }"
                :show-file-list="false"
                :on-success="uploadLicense"
                accept="image/*"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="license" :src="$oss(license)" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证正面" prop="corporateFrontPhoto">
              <el-upload
                class="avatar-uploader"
                action=""
                :http-request="upload"
                :data="{ dir: '/companys' }"
                :show-file-list="false"
                :on-success="uploadFront"
                accept="image/*"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="front" :src="$oss(front)" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="身份证背面" prop="corporateBackPhoto">
              <el-upload
                class="avatar-uploader"
                action=""
                :http-request="upload"
                :data="{ dir: '/companys' }"
                :show-file-list="false"
                :on-success="uploadBack"
                accept="image/*"
                :before-upload="beforeAvatarUpload"
              >
                <img v-if="back" :src="$oss(back)" class="avatar" />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogEditCompanyVisible = false">取 消</el-button>
        <el-button type="primary" @click="editCompany">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      :title="`查看用户公司详情`"
      :visible.sync="companyFormVisible"
      width="70%"
    >
      <el-table v-loading="loading" :data="companys" style="width: 100%">
        <el-table-column align="center" prop="companyName" label="企业名称">
        </el-table-column>
        <el-table-column
          align="center"
          prop="companyCode"
          label="企业统一社会信用代码"
        >
        </el-table-column>
        <el-table-column align="center" prop="corporateName" label="法人姓名">
        </el-table-column>
        <el-table-column align="center" prop="linkTel" label="联系电话">
        </el-table-column>
        <el-table-column align="center" prop="companyAddr" label="企业地址">
        </el-table-column>
        <el-table-column
          prop="busiLicensePhoto"
          label="营业执照"
          width="150"
          align="center"
        >
          <template
            slot-scope="scope"
            v-if="scope.row.busiLicensePhoto != null"
          >
            <div v-viewer>
              <img
                :src="$oss(scope.row.busiLicensePhoto)"
                alt
                style="width:30px;height:30px;border-radius:5px;"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="corporateFrontPhoto"
          label="法人身份证正面照"
          width="150"
          align="center"
        >
          <template
            slot-scope="scope"
            v-if="scope.row.corporateFrontPhoto != null"
          >
            <div v-viewer>
              <img
                :src="$oss(scope.row.corporateFrontPhoto)"
                alt
                style="width:30px;height:30px;border-radius:5px;"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          prop="corporateBackPhoto"
          label="法人身份证正面照"
          width="150"
          align="center"
        >
          <template
            slot-scope="scope"
            v-if="scope.row.corporateBackPhoto != null"
          >
            <div v-viewer>
              <img
                :src="$oss(scope.row.corporateBackPhoto)"
                alt
                style="width:30px;height:30px;border-radius:5px;"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="操作"
          class-name="small-padding"
          fixed="right"
        >
          <template slot-scope="scope">
            <el-button
              @click="openCompanyEditDialog(scope.row)"
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              title="修改"
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :title="`查看银行卡详情`"
      :visible.sync="bankFormVisible"
      width="70%"
    >
      <el-table v-loading="loading" :data="banks" style="width: 100%">
        <el-table-column
          align="center"
          prop="bankName"
          label="银行名称"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="bankNo"
          label="银行卡号"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="bankLogo"
          label="银行logo"
          width="200"
          align="center"
        >
          <template slot-scope="scope" v-if="scope.row.bankLogo != null">
            <div v-viewer>
              <img
                :src="$oss(scope.row.bankLogo)"
                alt
                style="width:30px;height:30px;border-radius:5px;"
              />
            </div>
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          prop="bankCardType"
          label="银行卡类型"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="accName"
          label="开户人名称"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="idCard"
          label="开户人证件号"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="phone"
          label="开户人手机号"
          width="150"
        >
        </el-table-column>
        <el-table-column></el-table-column>
      </el-table>
    </el-dialog>

    <el-dialog
      :title="`查看地址详情`"
      :visible.sync="addressFormVisible"
      width="65%"
    >
      <el-table v-loading="loading" :data="address" style="width: 100%">
        <el-table-column
          align="center"
          prop="linkPerson"
          label="联系人"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="linkTel"
          label="联系电话"
          width="150"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="province"
          label="省份"
          width="100"
        >
        </el-table-column>
        <el-table-column align="center" prop="city" label="城市" width="120">
        </el-table-column>
        <el-table-column
          align="center"
          prop="district"
          label="区域"
          width="100"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="address"
          label="详细地址"
          width="200"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="postalCode"
          label="邮政编码"
          width="100"
        >
        </el-table-column>
        <el-table-column></el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<style>
.el-header {
  text-align: center;
}

.el-aside {
  text-align: center;
}

.el-main {
  text-align: center;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<script>
import {
  queryAppUser,
  deleteAppUser,
  editAppUser,
  selectCompanys,
  selectBanks,
  selectAddress,
  disableAppUser,
  editCompany,
  addRole,
  resetPassword,
  queryRole,
  selectRoleByUserId
} from '@/api/consumer'
import md5 from 'js-md5'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
import Vue from 'vue'
Vue.use(Viewer)

export default {
  name: 'AppUser',
  data() {
    var checkRealName = (rule, value, callback) => {
      if (value) {
        if (value.indexOf(' ') >= 0) {
          callback(new Error('请勿输入带有空格的姓名'))
        }
        if (!/^[\u4e00-\u9fa5]+$/.test(value)) {
          callback(new Error('请输入正确的姓名'))
        }
        callback()
      }
      callback()
    }
    var checkPhone = (rule, value, callback) => {
      if (value) {
        if (!/^(1[345789]\d{9})$/.test(value)) {
          callback(new Error('请输入正确的号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var checkIdcard = (rule, value, callback) => {
      if (value) {
        if (!/(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/.test(value)) {
          callback(new Error('请输入正确的号码'))
        } else {
          callback()
        }
      } else {
        callback()
      }
    }
    var checkPassword = (rule, value, callback) => {
      if (!value) {
        return callback(new Error('请输入密码'))
      }
      if (!/^(?=.*[0-9])(?=.*[a-z])(?=.*[A-Z])(.{6,20})$/.test(value)) {
        callback(new Error('请输入6-20位且包含大小写英文字母和数字的密码!'))
      } else {
        callback()
      }
    }
    return {
      passwordFormVisible: false,
      dialogEditFormVisible: false,
      dialogRoleFormVisible: false,
      dialogAddFormVisible: false,
      companyFormVisible: false,
      bankFormVisible: false,
      addressFormVisible: false,
      dialogEditCompanyVisible: false,
      loading: false,
      companyForm: {},
      roleForm: {},
      editForm: {
        rowId: undefined
      },
      passwordForm: {},
      modifyForm: {},
      passwordFormRules: {
        password: [
          { required: true, validator: checkPassword, trigger: 'blur' }
        ]
      },
      editFormRules: {
        realName: [{ validator: checkRealName, trigger: 'blur' }],
        phone: [{ validator: checkPhone, trigger: 'blur' }],
        mail: [{ trigger: 'blur' }],
        idcard: [{ validator: checkIdcard, trigger: 'blur' }]
      },
      roleFormRules: {
        attribute: [
          { required: true, message: '请选择用户类型', trigger: 'blur' }
        ]
      },
      editCompanyRules: {},
      queryForm: {
        current: 1,
        pages: 0,
        total: 0,
        size: 10,
        ascs: '',
        descs: '',
        importance: undefined,
        title: undefined
      },
      deleteForm: {
        rowId: '',
        status: '',
        isDeleted: ''
      },
      detailForm: {
        accName: '',
        address: '',
        bankCardImg: '',
        bankCardType: '',
        bankName: '',
        bankNo: '',
        busiLicensePhoto: '',
        city: '',
        companyAddr: '',
        companyCode: '',
        companyLinkTel: '',
        companyName: '',
        corporateName: '',
        district: '',
        idcard: '',
        linkPerson: '',
        linkTel: '',
        phone: '',
        postalCode: '',
        province: ''
      },
      attributeOptions: Dicts.USER_ATTRIBUTE,
      statusOptions: Dicts.CONSUMER_STATUS,
      sexOptions: Dicts.USER_SEX,
      records: [],
      companys: [],
      banks: [],
      address: [],
      license: '',
      front: '',
      back: '',
      checkedRoles: [],
      roles: []
    }
  },
  created() {
    // 初始化一次oss client,如果初始化过一次返回上一次初始化对象
    this.initOssClient().then(_ => {
      this.doQuery()
    })
  },
  methods: {
    handleSortChange({ column, prop, order }) {
      this.queryForm.ascs = ''
      this.queryForm.descs = ''
      if (order) {
        if (order === 'ascending') {
          this.queryForm.ascs = column.sortBy
        } else {
          this.queryForm.descs = column.sortBy
        }
      }
      this.queryForm.current = 0
      this.doQuery()
    },
    handleCurrentChange(current) {
      this.queryForm.current = current
      this.doQuery()
    },
    handleSizeChange(size) {
      this.queryForm.size = size
      this.doQuery()
    },
    doQuery() {
      this.loading = true
      queryAppUser(this.queryForm).then(({ data: { data } }) => {
        this.queryForm.current = data.current
        this.queryForm.pages = data.pages
        this.queryForm.total = data.total
        this.queryForm.size = data.size
        this.records = data.records
        this.loading = false
      })
    },
    handleDelete(rowId) {
      this.deleteForm.rowId = rowId
      this.deleteForm.status = 0
      this.$confirm('确认禁用此用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        disableAppUser(this.deleteForm).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    active(rowId) {
      this.deleteForm.rowId = rowId
      this.deleteForm.status = 1
      this.$confirm('确认激活此用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        editAppUser(this.deleteForm).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: msg,
            type: 'success'
          })
        })
      })
    },
    deleteApp({ rowId, attribute }) {
      this.$confirm('确认注销此用户?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteAppUser(rowId, attribute).then(({ data: { data, msg } }) => {
          this.doQuery()
          this.$message({
            showClose: true,
            message: '该用户注销成功',
            type: 'success'
          })
        })
      })
    },
    companyDialog(rowId) {
      selectCompanys(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.openCompanyDialog()
          if (data !== undefined) {
            this.companys = data.records
          }
        }
      })
    },
    bankDialog(rowId) {
      selectBanks(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.openBankDialog()
          if (data !== undefined) {
            this.banks = data.records
          }
        }
      })
    },
    addressDialog(rowId) {
      selectAddress(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.openAddressDialog()
          if (data !== undefined) {
            this.address = data.records
          }
        }
      })
    },
    openCompanyDialog() {
      this.companys = []
      this.companyFormVisible = true
      this.$refs.companys && this.$refs.companys.resetFields()
    },
    CompanyEditDialog() {
      this.companyFormVisible = false
      this.companyForm = {}
      this.dialogEditCompanyVisible = true
      this.$refs.companyForm && this.$refs.companyForm.resetFields()
    },
    openCompanyEditDialog({
      rowId,
      companyName,
      companyCode,
      corporateName,
      linkTel,
      companyAddr,
      busiLicensePhoto,
      corporateFrontPhoto,
      corporateBackPhoto
    }) {
      this.CompanyEditDialog()
      this.companyForm = {
        rowId: rowId,
        companyName: companyName,
        companyCode: companyCode,
        corporateName: corporateName,
        linkTel: linkTel,
        companyAddr: companyAddr,
        busiLicensePhoto: busiLicensePhoto,
        corporateFrontPhoto: corporateFrontPhoto,
        corporateBackPhoto: corporateBackPhoto
      }
      this.license = busiLicensePhoto
      this.front = corporateFrontPhoto
      this.back = corporateBackPhoto
    },
    openBankDialog() {
      this.banks = []
      this.bankFormVisible = true
      this.$refs.banks && this.$refs.banks.resetFields()
    },
    openAddressDialog() {
      this.address = []
      this.addressFormVisible = true
      this.$refs.address && this.$refs.address.resetFields()
    },
    openRoleDialog() {
      this.roleForm = {}
      this.dialogRoleFormVisible = true
      this.$refs.roleForm && this.$refs.roleForm.resetFields()
    },
    roleDialog({ rowId, attribute }) {
      this.checkedRoles = []
      queryRole().then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.roles = data
          this.openRoleDialog()
          this.roleForm = {
            userId: rowId,
            attribute: attribute
          }
        }
      })
      selectRoleByUserId(rowId).then(({ data: { code, data, msg } }) => {
        if (code === 0) {
          this.checkedRoles = data
        }
      })
    },
    handlecheckedRolesChange(val) {
      this.roleForm.roleIds = val
    },
    editDialog({ rowId, realName, phone, mail, idcard }) {
      this.openResetPasswordDialog()
      this.editForm = {
        rowId: rowId,
        realName: realName,
        phone: phone,
        mail: mail,
        idcard: idcard
      }
    },
    openResetPasswordDialog() {
      this.editForm = {}
      this.dialogEditFormVisible = true
      this.$refs.editForm && this.$refs.editForm.resetFields()
    },
    openCreateDialog() {
      this.addForm = {}
      this.dialogAddFormVisible = true
      this.$refs.addForm && this.$refs.addForm.resetFields()
    },
    upload(options) {
      this.uploadForElement(options)
    },
    uploadLicense(response, file, fileList) {
      this.license = response.name
      this.companyForm.busiLicensePhoto = response.name
    },
    uploadFront(response, file, fileList) {
      this.front = response.name
      this.companyForm.corporateFrontPhoto = response.name
    },
    uploadBack(response, file, fileList) {
      this.back = response.name
      this.companyForm.corporateBackPhoto = response.name
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/png' || 'image/jpg'
      // const isLt2M = file.size / 1024 / 1024 > 2
      // const width = file.width > 300
      // const height = file.height > 280

      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG 格式!')
      }
      // if (!isLt2M) {
      //   this.$message.error('上传图片大小不能超过 2MB!')
      // }
      // if (!width || !height) {
      //   this.$message.error('上传图片尺寸不能超过 300X280!')
      // }
      return isJPG
    },
    editCompany() {
      this.$refs.companyForm.validate(valid => {
        if (valid) {
          editCompany(this.companyForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.dialogEditCompanyVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    },
    editAppUser() {
      this.$refs.editForm.validate(valid => {
        if (valid) {
          editAppUser(this.editForm).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doQuery()
              this.dialogEditFormVisible = false
            }
            this.$message({
              showClose: true,
              message: msg,
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          return false
        }
      })
    },
    addRole() {
      this.$refs.roleForm.validate(valid => {
        if (valid) {
          addRole(this.roleForm).then(({ data: { data, msg, code } }) => {
            if (code === 0) {
              this.doQuery()
              this.dialogRoleFormVisible = false
            }
            this.$message({
              showClose: true,
              message: '赋权成功',
              type: code === 0 ? 'success' : 'error'
            })
          })
        } else {
          return false
        }
      })
    },
    updateAttributeChenge() {
      if (this.editForm.attribute === 'property') {
        this.isShow = true
      } else {
        this.isShow = false
      }
    },
    editExample({ rowId }) {
      this.resetPasswordDialog()
      this.passwordForm = {
        rowId: rowId
      }
    },
    resetPasswordDialog() {
      this.passwordForm = {}
      this.passwordFormVisible = true
      this.$refs.passwordForm && this.$refs.passwordForm.resetFields()
    },
    resetPassword() {
      this.$refs.passwordForm.validate(valid => {
        if (valid) {
          this.modifyForm.password = md5(this.passwordForm.password)
          this.modifyForm.rowId = this.passwordForm.rowId
          resetPassword(this.modifyForm).then(
            ({ data: { data, msg, code } }) => {
              if (code === 0) {
                this.doQuery()
                this.passwordFormVisible = false
              }
              this.$message({
                showClose: true,
                message: msg,
                type: code === 0 ? 'success' : 'error'
              })
            }
          )
        } else {
          return false
        }
      })
    }
  },
  components: {}
}
</script>

<style scoped></style>
